<template>
  <div class="saveUpdate">
    <el-dialog :title="status === 0?'回复':'查看'" :visible.sync="showDialog" @close="closeDialog" :showUpdate="showUpdate"
      width="900px" :close-on-click-modal="false">
      <div>
        <el-row>
          <el-col :span="8">用户ID：{{DetailInfo.player_id}}</el-col>
          <el-col :span="8">用户等级：{{DetailInfo.level}}</el-col>
          <el-col :span="8">注册渠道：{{DetailInfo.chn}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">游戏版本：{{DetailInfo.game_version}}</el-col>
          <el-col :span="8">机型：{{DetailInfo.ua}}</el-col>
          <el-col :span="8">系统：{{DetailInfo.platform}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">问题类型：{{DetailInfo.type.desc ? DetailInfo.type.desc :''}}</el-col>
          <div v-if="DetailInfo.type.desc === '提现问题' || DetailInfo.type.desc === '游戏问题' || DetailInfo.type.desc === '账号问题'  || DetailInfo.type.desc === '其他问题'">
            <el-col :span="8" v-if="DetailInfo.type.desc === '游戏问题'">游戏分类：{{$store.state.app.gameType[DetailInfo.game]}}</el-col>
            <el-col :span="8">问题分类：{{$store.state.app.questionType[DetailInfo.question_type]}}</el-col>
          </div>
          <div v-if="DetailInfo.type.desc === '商务合作'">
            <el-col :span="8">联系方式：{{contactType[cooperation.contact_type] }}</el-col>
            <el-col :span="8">联系号码：{{cooperation.contact_account}}</el-col>
          </div>
          <div v-if="DetailInfo.type.desc === '提现问题' && $store.state.app.questionType[DetailInfo.question_type] === '提现未到账'">
            <el-col :span="8">提现单号：{{DetailInfo.withdraw_id}}</el-col>
            <el-col :span="8">提现时间：{{DetailInfo.withdraw_at}}</el-col>
            <el-col :span="8">提现金额：{{DetailInfo.amount ? DetailInfo.amount:0}}</el-col>
            <el-col :span="24">
              <el-col :span="2">补充说明：</el-col>
              <el-col :span="22" v-if="DetailInfo.desc" v-html="DetailInfo.desc"></el-col>
            </el-col>
          </div>
          <div v-else-if="DetailInfo.type.desc !== '充值问题'&&DetailInfo.type.desc !== '商务合作'">
            <el-row>
              <el-col :span="24">
                <el-col :span="3">问题详细描述：</el-col>
                <el-col :span="21" v-if="DetailInfo.desc" v-html="DetailInfo.desc"></el-col>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" v-if="!($store.state.app.questionType[DetailInfo.question_type] === '建议')">
                问题出现的具体时间：{{DetailInfo.appear_at }}
              </el-col>
            </el-row>
          </div>
          <div v-if="DetailInfo.type.desc === '充值问题'">
            <el-col :span="8">充值单号：{{DetailInfo.pay_id}}</el-col>
            <el-col :span="8">付款时间：{{DetailInfo.pay_at}}</el-col>
          </div>
        </el-row>
        <div v-if="DetailInfo.type.desc === '充值问题'">
          <el-row>
            <el-col :span="8">充值金额：{{DetailInfo.amount ? DetailInfo.amount:0}}</el-col>
            <el-col :span="8">支付类型：{{$store.state.app.pay_type[DetailInfo.pay_type]}}</el-col>
            <el-col :span="8">付款姓名：{{DetailInfo.pay_name}}</el-col>
          </el-row>
        </div>
        <div v-if="DetailInfo.type.desc === '商务合作'">
          <el-row>
            <el-col :span="24">您拥有的资源：{{cooperation.source_desc}}</el-col>
            <el-col :span="8">之前是否有棋牌推广经验：{{cooperation.is_veteran ===1 ? '是':'否'}}</el-col>
            <el-col :span="8">当前是否拥有下级团队：{{cooperation.with_lower ===1 ? '是':'否'}}</el-col>
            <el-col :span="8">下级团队人数：{{proSubordinateTeamNum_[cooperation.lower_count]}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">预计每天可带来多少新用户：{{propNewUser[cooperation.daily_new]}}</el-col>
          </el-row>
        </div>
        <el-row v-if="DetailInfo.type.desc !== '商务合作'&&DetailInfo.images">
          <el-col :span="24">凭证： <a v-for="(item, index) in DetailInfo.images" :href="item" :key="index"
              target="_blank">
              <img :src="item" style="width: 30px">
            </a></el-col>
        </el-row>
        <el-row v-if="DetailInfo.type.desc !== '商务合作'&&dataAllInDom&& !DetailInfo.images">
          <el-col :span="24" >凭证： 无</el-col>
        </el-row>
        <el-divider></el-divider>
        <el-form :model="DetailInfo" ref="saveChn" label-width="120px" size="mini">
          <el-row>
            <div v-if="DetailInfo.status === 1 ">
              <el-col :span="4">回复：</el-col>
              <el-col :span="20" v-if="DetailInfo.response" v-html="DetailInfo.response"></el-col>
            </div>
            <div v-else>
              <el-col :span="24">
                <el-form-item label="回复:" prop="response" :rules="[{ required: true, message: '回复不能为空'}]">
                  <el-input v-model="DetailInfo.response" type="textarea" :rows="3" placeholder="请输入内容">
                  </el-input>
                </el-form-item>
              </el-col>
            </div>
          </el-row>
          <el-row v-if="phraseList.length>0&&status === 0">
            <el-col :span="4">&nbsp;</el-col>
            <el-col :span="20">
              <el-row>
                <span v-for="(item, index)  in phraseList" :key="index">
                  <el-button type="warning" class="but-phrase" @click="DetailInfo.response=item.context" size="small"
                    v-if="item">
                    {{item.title}}
                  </el-button>
                </span>
              </el-row>
            </el-col>
          </el-row>
          <el-row v-if="status===0" style="margin-top: 10px;">
            <el-form-item label="重设问题类型:">
              <el-switch v-model="switchValue" active-color="#13ce66" inactive-color="#909399"></el-switch>
            </el-form-item>
          </el-row>
          <div v-if="switchValue">
            <el-row>
            <div v-if="DetailInfo.status === 1 ">
              <el-col :span="4">重设问题类型：</el-col>
              <el-col :span="20">{{DetailInfo.reset_type.desc}}</el-col>
            </div>
            <div v-else >
              <el-col :span="24" size="mini">
                <el-form-item label="问题类型：">
                  <el-select v-model="reset_type_id" placeholder="请选择" style="width: 200px" @change="changeReset">
                    <el-option v-for="(val,index) in problemsTypeList" :key="index" :label="val.desc" :value="val.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </div>
          </el-row>
          <el-row>
            <div v-if="DetailInfo.status === 1 ">
              <el-col :span="4">二级分类：</el-col>
              <el-col :span="20">{{DetailInfo.reset_question_type_desc}}</el-col>
            </div>
            <div v-else>
              <el-col :span="24" size="mini">
                <el-form-item label="二级分类：">
                  <el-select v-model="reset_question_type" placeholder="请选择" style="width: 200px">
                    <el-option v-for="(item,index) in secondList_type" :key="index" :label="item.lab" :value="item.val"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </div>
          </el-row>
          <el-row>
            <div v-if="DetailInfo.status === 1 ">
              <el-col :span="4">三级分类：</el-col>
              <el-col :span="20">{{DetailInfo.reset_game_desc}}</el-col>
            </div>
            <div v-else>
              <el-col :span="24" size="mini">
                <el-form-item label="三级分类：">
                  <el-select v-model="reset_game" placeholder="请选择" style="width: 200px">
                    <el-option v-for="(item,index) in thridList_type" :key="index" :label="item.lab" :value="item.val"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </div>
          </el-row>
          </div>
          
          <el-row>
            <div v-if="DetailInfo.status === 1 ">
              <el-col :span="4">备注：</el-col>

              <el-col :span="20" v-if="DetailInfo.remark&&DetailInfo.status === 1" v-html="DetailInfo.remark"></el-col>
            </div>
            <div v-else>
              <el-col :span="24">
                <div>
                  <el-form-item label="备注:" prop="response">
                    <el-input v-model="DetailInfo.remark" type="textarea" :rows="3" placeholder="请输入内容"></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </div>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog" size="small">取 消</el-button>
        <el-button v-if="DetailInfo.status === 0 " type="primary" :loading="loading" @click="updateDetail" size="small">
          确 定
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
// import DialogWrapper from '@/components/DialogWrapper'
import { getWorkOrderById, updateCustomerOrder, getPhrase } from '@/api'
// import gameProblems from './gameProblems'
// import { queryFilter } from '@/utils/patch'

export default {
  // components: {DialogWrapper, gameProblems},
  data () {
    return {
      showDialog: this.showUpdate,
      loading: false,
      dataAllInDom: false,
      DetailInfo: {
        type: {},
        desc: '',
        response: '',
        remark: '',
        reset_type: {}
      },
      cooperation: {},
      phraseList: [],
      proSubordinateTeamNum_: this.$store.state.app.proSubordinateTeamNum_,
      propNewUser: this.$store.state.app.propNewUser_,
      contactType: this.$store.state.app.contactType,
      reset_type_id: null,
      reset_question_type: null,
      reset_game: null,
      secondList_type: [],
      thridList_type: [],
      switchValue: false
    }
  },
  props: {
    showUpdate: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number
    },
    problemsTypeList: {
      type: Array
    },
    status: {
      type: Number
    }
  },
  created () {
    if (this.id) {
      this.getDetail()
    }
    if (this.status === 1){
      this.switchValue = true
    }
    console.log(this.problemsTypeList, '11')
  },
  mounted () {
  },
  methods: {
    getPhraseList () {
      getPhrase({ type_id: this.DetailInfo.type_id }).then(res => {
        //pub=公用模版list pri=个人模版list
        //2: '公用模板', 1: '个人模板',公用模版优先
        if (res.data.pub.length < 4) {
          this.phraseList = [...res.data.pub, ...res.data.pri]

        } else if (res.data.pub.length >= 4 && res.data.pri.length < 4) {
          this.phraseList = [...res.data.pri, ...res.data.pub]
        } else if (res.data.pub.length >= 4) {
          res.data.pub.length = 4;
          this.phraseList = [...res.data.pub, ...res.data.pri]
        }
        if (this.phraseList.length > 8) {
          this.phraseList.length = 8;
        }
        console.log(this.phraseList, 'phlist')
      })
    },
    saveDetail () {
    },
    updateDetail () {
      // console.log('1',this.secondList_type,'2',this.thridList_type)
      if(this.secondList_type.length!==0&&!this.reset_question_type){
        this.$message({type: 'warning', message: '请填写二级分类' })
        return
      }
      if(this.thridList_type.length!==0&&!this.reset_game){
        this.$message({type: 'warning', message: '请填写三级分类' })
        return
      }
      this.$refs.saveChn.validate(valid => {
        if (valid) {
          let data = {
            response: this.DetailInfo.response,
            reset_type_id: this.reset_type_id,
            reset_question_type: this.reset_question_type===null?null:Number(this.reset_question_type),
            reset_game: this.reset_game===null?null:Number(this.reset_game),
            remark: this.DetailInfo.remark,
            status: 1
          }
          console.log(this.DetailInfo.remark, data, '999')
          // let queryObj = queryFilter(data)
          // updateCustomerOrder(this.id, queryObj).then(res => {
          updateCustomerOrder(this.id, data).then(res => {
            if (res.status === 0) {
              this.$message({ type: 'success', message: '编辑成功' })
              this.$emit('update:showUpdate', false)
              this.$parent.timerStart()
            } else {
              this.$parent.timerStart()
            }
          }).catch(() => {
            this.$parent.timerStart()
          })
        }
      })
    },
    getDetail () {
      getWorkOrderById(this.id).then(res => {
        if (res.status === 0) {
          this.DetailInfo = res.data
          this.cooperation = JSON.parse(this.DetailInfo.cooperation) || {}
          this.getPhraseList()
          this.DetailInfo.ua = this.DetailInfo.ua.split('like')[0].split('Build')[0]
          this.dataAllInDom = true
          this.reset_type_id = this.DetailInfo.reset_type_id
          this.reset_question_type = this.DetailInfo.reset_question_type
          this.reset_game = this.DetailInfo.reset_game
          // 代码写得这么高效，家人知否？
          let desc = this.DetailInfo.desc && this.DetailInfo.desc.replace(/\n/g, "<br/>").replace(/\s/g, "&nbsp;");
          Object.assign(this.DetailInfo, { desc })
          let response = this.DetailInfo.response && this.DetailInfo.response.replace(/\n/g, "<br/>").replace(/\s/g, "&nbsp;");
          Object.assign(this.DetailInfo, { response })
          let remark = this.DetailInfo.remark && this.DetailInfo.remark.replace(/\n/g, "<br/>").replace(/\s/g, "&nbsp;");
          Object.assign(this.DetailInfo, { remark })
        }
      }).then(() => {
        this.clearValidate('saveChn')
      })
    },
    // 清除表单校验
    clearValidate (formName) {
      this.$refs[formName].clearValidate();
    },
    closeDialog () {
      this.$emit('update:showUpdate', 0)
      this.$parent.timerStart()
      // console.log('000')
    },
    changeReset () {
      this.reset_question_type = null
      this.reset_game = null
    }
  }
  ,
  watch: {
    showUpdate () {
      this.showDialog = this.showUpdate
    },
    'reset_type_id': function () {
      if (this.reset_type_id === 1) {
        this.secondList_type = []
        this.thridList_type = []
        // delete this.reset_question_type
        // delete this.reset_game
      } else if (this.reset_type_id === 2) {
        this.secondList_type = this.$store.state.app.withDrawProblemType
        this.thridList_type = []
      } else if (this.reset_type_id === 3) {
        this.secondList_type = this.$store.state.app.accountProblemType
        this.thridList_type = []
      } else if (this.reset_type_id === 4) {
        this.secondList_type = this.$store.state.app.gameProblemType
        this.thridList_type = this.$store.state.app.gameProblemNextType
      } else if (this.reset_type_id === 5) {
        this.secondList_type = []
        this.thridList_type = []
      } else if (this.reset_type_id === 6) {
        this.secondList_type = this.$store.state.app.otherProblemType
        this.thridList_type = []
      } else {
        this.secondList_type = []
        this.thridList_type = []
      }
    },
    // 重设按钮关闭内容重置
    'switchValue': function (){
      if(this.switchValue===false){
        this.reset_type_id = this.DetailInfo.reset_type_id
        this.reset_question_type = this.DetailInfo.reset_question_type
        this.reset_game = this.DetailInfo.reset_game
      }
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-col {
  margin: 10px 0 10px 0;
}
</style>
